<div [@routerTransition]>

    <h3>
        {{l("ChangePassword")}}
    </h3>

    <form nz-form #resetPassForm="ngForm" method="post" (ngSubmit)="save()">
        <p>
            {{l("PleaseEnterYourNewPassword")}}
        </p>

        <nz-form-item>
            <nz-form-control>
                <input nz-input type="password" name="Password"
                       [(ngModel)]="model.password" #Password="ngModel" placeholder="{{l('Password')}}"
                       validateEqual="PasswordRepeat"
                       reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit"
                       [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase"
                       [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                       [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </nz-form-control>
        </nz-form-item>

        <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
            <ul class="help-block text-error" *ngIf="Password.errors">
                <li [hidden]="!Password.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                <li [hidden]="!Password.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}
                </li>
                <li [hidden]="!Password.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}
                </li>
                <li [hidden]="!Password.errors.requireNonAlphanumeric">
                    {{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}
                </li>
                <li [hidden]="!Password.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint",
                    passwordComplexitySetting.requiredLength)}}
                </li>
            </ul>
        </div>

        <nz-form-item>
            <nz-form-control>
                <input nz-input type="password" name="PasswordRepeat" class="form-control placeholder-no-fix"
                       [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel" placeholder="{{l('PasswordRepeat')}}"
                       validateEqual="Password"
                       reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit"
                       [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase"
                       [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                       [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </nz-form-control>
        </nz-form-item>
        <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
            <ul class="help-block text-error" *ngIf="PasswordRepeat.errors">
                <li [hidden]="!PasswordRepeat.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}
                </li>
                <li [hidden]="!PasswordRepeat.errors.requireLowercase">
                    {{l("PasswordComplexity_RequireLowercase_Hint")}}
                </li>
                <li [hidden]="!PasswordRepeat.errors.requireUppercase">
                    {{l("PasswordComplexity_RequireUppercase_Hint")}}
                </li>
                <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">
                    {{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}
                </li>
                <li [hidden]="!PasswordRepeat.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint",
                    passwordComplexitySetting.requiredLength)}}
                </li>
                <li [hidden]="PasswordRepeat.valid">{{l("PasswordsDontMatch")}}</li>
            </ul>
        </div>

        <nz-form-item>
            <button nz-button [disabled]="saving" routerLink="/account/login" type="button">
                <i class="anticon anticon-arrow-left">
                </i>
                {{l("Back")}}
            </button>
            <button nz-button="" type="submit"
                    [disabled]="!resetPassForm.form.valid" [nzLoading]="saving">
                <i class="anticon anticon-check"></i>
                {{l("Submit")}}
            </button>
        </nz-form-item>
    </form>
</div>



